<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link type="text/css" href="https://raw.github.com/commons/common.css/master/build/common.css" rel="stylesheet">
<link type="text/css" href="main.less" media="screen" rel="stylesheet/less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js" type="text/javascript"></script>
</head>
<body>
<div class="linear"><h1>Linear gradient</h1>
<p><pre>
  div.linear {
	height:100%;
	width:50%;
	float:left;
	text-align:left;
	.linear-gradient(left bottom, left top, #930, #cf0);
  }
</pre></p>




</div>

<div class="radial"><h1>Radial gradient</h1>
<p><pre>
  div.radial {
	height:100%;
	width:50%;
	float:left;
	text-align:left;
	.radial-gradient(50%, 50%, circle, cover, #00f, 30%, #fff, 100%);
  }
</pre></p>
</div>

<div class="radial-3color"><h1>3 Color Radial gradient</h1>
<p><pre>
  div.radial-3color {
	height:100%;
	width:50%;
	float:left;
	text-align:left;
	.radial-gradient-3color(circle, #9ff 10%, #0f0 30%, #ff0 90%);
  }
</pre></p>
</div>

<div class="sphere"><h1>Spherical gradient</h1>
<p><pre>
  div.sphere {
	height:100%;
	width:50%;  
	border-radius: 50%;
	float:left;
	text-align:left;
	.radial-gradient-sphere(#9f0);
  }
</pre></p>
</div>
</body>
</html>